<template>
  <my-model
    :footer="null"
    :canFullScreen="true"
    title="检测建议"
    :visible="visible"
    :width="isFullscreen ? '100vw' : 1280"
    :showCancelBtn="false"
    :bodyStyle="{ height: isFullscreen ? 'calc(100vh - 55px)' : undefined }"
    :wrapClassName="isFullscreen ? 'dialog-wrapper' : undefined"
    @cancel="visible = false"
    @ok="visible = false"
    @toggleFullscreen="isFullscreen = !isFullscreen"
  >
    <!-- 视频 -->
    <div :class="isFullscreen ? 'fullscreen' : ''" class="video-detail" v-if="pageType == 'video'">
      <div class="left">
        <video id="errVideo" :src="obj.url" controls></video>
        <div class="title" style="margin-left: 12px">音频内容</div>
        <div class="audit-content" v-html="auditText"></div>
        <div class="count">审核字数：{{ sum }}</div>
      </div>
      <div class="right">
        <div class="title">检测建议</div>
        <div class="video-content flex-1 d-flex">
          <chart-tabs
            :showBorder="true"
            @selectTab="
              val => {
                typeTabs = val;
                ocrList = [];
              }
            "
            :tabList="[
              { key: 'text', name: '文本检测情况' },
              { key: 'image', name: '图片检测情况' }
            ]"
          ></chart-tabs>
          <div class="margin-t-10 flex-1 d-flex" style="flex-direction: column;height:calc(100% - 38px);" v-show="typeTabs == 'text'">
            <div class="margin-b-10" style="flex-shrink: 0; flex-grow: 0" v-if="errList.length > 0">
              <span>错误等级：</span>
              <a-checkbox v-model="allError" @change="onCheckAllChange">全部</a-checkbox>
              <a-checkbox-group @change="onChange" v-model="checkedList" name="errorType" :options="errorList" />
            </div>
            <div style="flex-shrink: 0; flex-grow: 0" v-if="errList.length > 0">
              <div class="margin-b-10">违规类型：</div>
              <div class="labelParent">
                <div class="active labelItem" @click="showLabel(0)">全部问题</div>
                <div
                  class="labelItem"
                  :class="firstLabelClassList[index]"
                  @click="showLabel(index + 1, item, firstLabelClassList[index])"
                  v-for="(item, index) in firstLabelList"
                  :key="item"
                >
                  {{ item }}
                </div>
              </div>
              <div class="labelChildren">
                <div :class="secondClass" v-for="item in secondLabelList" :key="item">{{ item }}</div>
              </div>
            </div>
            <div class="result-card-box">
              <template v-if="showErrList.length > 0">
                <result-list-card
                  @assess="assess"
                  @correct="correct"
                  v-for="item in showErrList"
                  @checkCard="index => (checkCard = index)"
                  :isHandle="false"
                  :key="item.uuid"
                  :item="item"
                  :index="item.trueIndex + 1"
                  :checkCard="checkCard"
                ></result-list-card>
              </template>
              <no-data v-else tip="恭喜您!本次检测没有发现问题!"></no-data>
            </div>
          </div>
          <div class="margin-t-10 flex-1 d-flex" style="position:relative;flex-direction: column;height:calc(100% - 38px);" v-show="typeTabs == 'image'">
            <div class="errImg" v-if="obj.imgInfoList.length > 0">
              <a-alert type="info" closable>
                <span slot="message">
                  <img style="width: 16px;margin-right: 6px;margin-bottom: 3px;" src="@/assets/img/ocr.png" />
                  <span>表示该图片字幕存在违规内容</span>
                </span>
              </a-alert>

              <div class="image-box">
                <template v-if="obj.imgInfoList.length > 0 && obj.imgInfoList.length % 4 == 0">
                  <err-image @play="playError" v-for="(item, index) in obj.imgInfoList" :index="index + 1" :key="index" :item="item"></err-image>
                </template>
                <template v-else-if="obj.imgInfoList.length > 0 && obj.imgInfoList.length % 4 == 1">
                  <err-image @play="playError" v-for="(item, index) in obj.imgInfoList" :index="index + 1" :key="index" :item="item"></err-image>
                  <div style="width: 23%; height: 77px"></div>
                  <div style="width: 23%; height: 77px"></div>
                  <div style="width: 23%; height: 77px"></div>
                </template>
                <template v-else-if="obj.imgInfoList.length > 0 && obj.imgInfoList.length % 4 == 2">
                  <err-image @play="playError" v-for="(item, index) in obj.imgInfoList" :index="index + 1" :key="index" :item="item"></err-image>
                  <div style="width: 23%; height: 77px"></div>
                  <div style="width: 23%; height: 77px"></div>
                </template>
                <template v-else-if="obj.imgInfoList.length > 0 && obj.imgInfoList.length % 4 == 3">
                  <err-image @play="playError" v-for="(item, index) in obj.imgInfoList" :index="index + 1" :key="index" :item="item"></err-image>
                  <div style="width: 23%; height: 77px"></div>
                </template>
              </div>
            </div>
            <no-data v-else tip="恭喜您!本次检测没有发现问题!"></no-data>
            <div class="ocr-list" v-if="typeTabs == 'image'">
              <ocr-card v-for="item in ocrList" @assess="assess" :key="item.pos" :item="item"></ocr-card>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 音频 -->
    <div :class="isFullscreen ? 'fullscreen' : ''" class="audio-detail" v-if="pageType == 'audio'">
      <div class="left">
        <div class="audit-box">
          <div id="time-line" class="time-line"></div>
          <div id="waveform" class="wave-box"></div>
          <div class="btn-handle">
            <span class="btn" v-show="audioIsplay == false" @click="play(true)"><i class="el-icon-video-play"></i>播放</span>
            <span class="btn mr-5px" v-show="audioIsplay == true" @click="play(false)"><i class="el-icon-video-pause"></i>暂停</span>
            <div class="block">
              音量
              <span class="btn" @click="addChangeVolume(false)"><i class="el-icon-remove"></i></span>
              <input type="number" class="block-input" v-model="audioVolume" @change="changeVolume($event)" />
              <span class="btn" @click="addChangeVolume(true)"><i class="el-icon-circle-plus"></i></span>
            </div>
          </div>
        </div>
        <!-- <audio :src="obj.url" controls></audio> -->
        <div class="title">音频内容</div>
        <div class="audit-content" v-html="auditText"></div>
        <div class="count">审核字数：{{ sum }}</div>
      </div>
      <div class="right">
        <div class="title">文字检测情况</div>
        <div class="margin-b-10" v-if="errList.length > 0">
          <span>错误等级：</span>
          <a-checkbox v-model="allError" @change="onCheckAllChange">全部</a-checkbox>
          <a-checkbox-group @change="onChange" v-model="checkedList" name="errorType" :options="errorList" />
        </div>
        <div v-if="errList.length > 0">
          <div style="margin-bottom: 10px">违规类型：</div>
          <div class="labelParent">
            <div class="active labelItem" @click="showLabel(0)">全部问题</div>
            <div
              class="labelItem"
              :class="firstLabelClassList[index]"
              @click="showLabel(index + 1, item, firstLabelClassList[index])"
              v-for="(item, index) in firstLabelList"
              :key="item"
            >
              {{ item }}
            </div>
          </div>
          <div class="labelChildren">
            <div :class="secondClass" v-for="item in secondLabelList" :key="item">{{ item }}</div>
          </div>
        </div>
        <div class="result-card-box flex-1">
          <template v-if="showErrList.length > 0">
            <result-list-card
              @assess="assess"
              @correct="correct"
              v-for="item in showErrList"
              @checkCard="index => (checkCard = index)"
              :isHandle="false"
              :key="item.uuid"
              :item="item"
              :index="item.trueIndex + 1"
              :checkCard="checkCard"
            ></result-list-card>
          </template>
          <no-data v-else tip="恭喜您!本次检测没有发现问题!"></no-data>
        </div>
      </div>
    </div>
    <!-- 文本 -->
    <div :class="isFullscreen ? 'fullscreen' : ''" class="text-detail" v-if="pageType == 'text'">
      <div class="left" style="padding: 12px 0 10px 12px">
        <div class="title">文本内容</div>
        <div class="audit-content" v-html="auditText"></div>
        <div class="count">审核字数：{{ sum }}</div>
      </div>
      <div class="right">
        <div class="title">文字检测情况</div>
        <div class="margin-b-10" style="flex-shrink: 0;flex-grow: 0;" v-if="errList.length > 0">
          <span>错误等级：</span>
          <a-checkbox v-model="allError" @change="onCheckAllChange">全部</a-checkbox>
          <a-checkbox-group @change="onChange" v-model="checkedList" name="errorType" :options="errorList" />
        </div>
        <div style="flex-shrink: 0;flex-grow: 0;" v-if="errList.length > 0">
          <div style="margin-bottom: 10px">违规类型：</div>
          <div class="labelParent">
            <div class="active labelItem" @click="showLabel(0)">全部问题</div>
            <div
              class="labelItem"
              :class="firstLabelClassList[index]"
              @click="showLabel(index + 1, item, firstLabelClassList[index])"
              v-for="(item, index) in firstLabelList"
              :key="item"
            >
              {{ item }}
            </div>
          </div>
          <div class="labelChildren">
            <div :class="secondClass" v-for="item in secondLabelList" :key="item">{{ item }}</div>
          </div>
        </div>
        <div class="result-card-box flex-1">
          <template v-if="showErrList.length > 0">
            <result-list-text-card
              @correct="correct"
              v-for="(item, index) in showErrList"
              @assess="assess"
              @checkCard="index => (checkCard = index)"
              :key="index"
              :item="item"
              :index="index + 1"
              :checkCard="checkCard"
            ></result-list-text-card>
            <!-- <template v-if="pageType == 'text'">
                          <result-list-text-card
                            @correct="correct"
                            v-for="(item, index) in showErrList"
                            @checkCard="(index) => (checkCard = index)"
                            :wordId="item.keyWordLocationList[0].id"
                            :key="index"
                            :item="item"
                            :index="index + 1"
                            :checkCard="checkCard"
                          ></result-list-text-card>
                        </template>
                        <template v-else>
                          <result-list-card
                            @correct="correct"
                            v-for="(item, index) in showErrList"
                            @checkCard="(index) => (checkCard = index)"
                            :key="index"
                            :item="item"
                            :index="index + 1"
                            :checkCard="checkCard"
                          ></result-list-card>
                        </template> -->
          </template>
          <no-data v-else tip="恭喜您!本次检测没有发现问题!"></no-data>
        </div>
      </div>
    </div>
    <!-- 图片 -->
    <div :class="isFullscreen ? 'fullscreen' : ''" class="img-detail" v-if="pageType == 'image'">
      <div class="left">
        <div class="content">
          <img :src="obj.url" id="result-detail-image" />
          <p class="area" :key="i" v-for="(item, i) in imgArea" :style="{ top: item.y + 'px', left: item.x + 'px', width: item.w + 'px', height: item.h + 'px' }"></p>
        </div>
        <div class="title" style="margin-left: 12px">图片内容</div>
        <div class="audit-content" v-html="auditText"></div>
        <div class="count">审核字数：{{ sum }}</div>
      </div>
      <div class="right">
        <div class="title">检测建议</div>
        <div class="video-content flex-1 d-flex">
          <chart-tabs
            :showBorder="true"
            @selectTab="
              val => {
                typeTabs = val;
              }
            "
            :tabList="[
              { key: 'text', name: '文本检测情况' },
              { key: 'image', name: '图片检测情况' }
            ]"
          ></chart-tabs>
          <div class="margin-t-10 flex-1 d-flex" style="flex-direction: column;height:calc(100% - 38px);" v-show="typeTabs == 'text'">
            <div class="margin-b-10" style="flex-shrink: 0; flex-grow: 0" v-if="errList.length > 0">
              <span>错误等级：</span>
              <a-checkbox v-model="allError" @change="onCheckAllChange">全部</a-checkbox>
              <a-checkbox-group @change="onChange" v-model="checkedList" name="errorType" :options="errorList" />
            </div>
            <div style="flex-shrink: 0; flex-grow: 0" v-if="errList.length > 0">
              <div class="margin-b-10">违规类型：</div>
              <div class="labelParent">
                <div class="active labelItem" @click="showLabel(0)">全部问题</div>
                <div
                  class="labelItem"
                  :class="firstLabelClassList[index]"
                  @click="showLabel(index + 1, item, firstLabelClassList[index])"
                  v-for="(item, index) in firstLabelList"
                  :key="item"
                >
                  {{ item }}
                </div>
              </div>
              <div class="labelChildren">
                <div :class="secondClass" v-for="item in secondLabelList" :key="item">{{ item }}</div>
              </div>
            </div>
            <div class="result-card-box">
              <template v-if="showErrList.length > 0">
                <result-list-card
                  @correct="correct"
                  @assess="assess"
                  v-for="item in showErrList"
                  @checkCard="index => (checkCard = index)"
                  :isHandle="false"
                  :key="item.uuid"
                  :item="item"
                  :index="item.trueIndex + 1"
                  :checkCard="checkCard"
                ></result-list-card>
              </template>
              <no-data v-else tip="恭喜您!本次检测没有发现问题!"></no-data>
            </div>
          </div>
          <div class="margin-t-10 flex-1 d-flex" style="position:relative;flex-direction: column;height:calc(100% - 38px);" v-show="typeTabs == 'image'">
            <div class="errImg" v-if="imgFirstLabelList.length > 0">
              <a-alert type="info" closable>
                <span slot="message">
                  <img style="width: 16px;margin-right: 6px;margin-bottom: 3px;" src="@/assets/img/ocr.png" />
                  <span>表示该图片字幕存在违规内容</span>
                </span>
              </a-alert>
              <div style="flex-shrink: 0; flex-grow: 0" v-if="imgFirstLabelList.length > 0">
                <div class="margin-b-10">违规类型：</div>
                <div class="labelParent">
                  <div class="labelItem" :class="imgFirstLabelClassList[index + 1]" v-for="(item, index) in imgFirstLabelList" :key="item">
                    {{ item }}
                  </div>
                </div>
                <div class="labelChildren">
                  <div :class="secondClass" v-for="item in secondLabelList" :key="item">{{ item }}</div>
                </div>
              </div>
              <!-- <div class="image-box">
                <template v-if="obj.imgInfoList.length > 0 && obj.imgInfoList.length % 4 == 0">
                  <err-image :showSec="false" @play="playError" v-for="(item, index) in obj.imgInfoList" :index="index + 1" :key="index" :item="item"></err-image>
                </template>
                <template v-else-if="obj.imgInfoList.length > 0 && obj.imgInfoList.length % 4 == 1">
                  <err-image :showSec="false" @play="playError" v-for="(item, index) in obj.imgInfoList" :index="index + 1" :key="index" :item="item"></err-image>
                  <div style="width: 23%; height: 77px"></div>
                  <div style="width: 23%; height: 77px"></div>
                  <div style="width: 23%; height: 77px"></div>
                </template>
                <template v-else-if="obj.imgInfoList.length > 0 && obj.imgInfoList.length % 4 == 2">
                  <err-image :showSec="false" @play="playError" v-for="(item, index) in obj.imgInfoList" :index="index + 1" :key="index" :item="item"></err-image>
                  <div style="width: 23%; height: 77px"></div>
                  <div style="width: 23%; height: 77px"></div>
                </template>
                <template v-else-if="obj.imgInfoList.length > 0 && obj.imgInfoList.length % 4 == 3">
                  <err-image :showSec="false" @play="playError" v-for="(item, index) in obj.imgInfoList" :index="index + 1" :key="index" :item="item"></err-image>
                  <div style="width: 23%; height: 77px"></div>
                </template>
              </div> -->
            </div>
            <no-data v-else tip="恭喜您!本次检测没有发现问题!"></no-data>
            <div class="ocr-list" v-if="typeTabs == 'image'">
              <ocr-card v-for="item in ocrList" @play="showArea" :key="item.pos" :item="item" @assess="assess"></ocr-card>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="margin-t-20">
        <div class="title">检测建议</div>
        <div style="padding-left: 7px">
          <span>违规类型：</span>
          <a-tag style="margin-top: 3px" color="red" v-for="(item, index) in tagList" :key="index">{{ item }}</a-tag>
        </div>
      </div> -->
    </div>
    <!-- 大文本 -->
    <div :class="isFullscreen ? 'fullscreen' : ''" class="file-detail" v-if="pageType == 'ppt' || pageType == 'pdf' || pageType == 'word'">
      <div class="left">
        <div class="content" v-html="auditText"></div>
        <div class="count">审核字数：{{ sum }}</div>
      </div>
      <div class="right">
        <div class="title">检测建议</div>
        <div class="video-content flex-1 d-flex">
          <chart-tabs
            :showBorder="true"
            @selectTab="
              val => {
                typeTabs = val;
                ocrList = [];
              }
            "
            :tabList="[
              { key: 'text', name: '文本检测情况' },
              { key: 'image', name: '图片检测情况' }
            ]"
          ></chart-tabs>
          <div class="margin-t-10 flex-1 d-flex" style="flex-direction: column;height:calc(100% - 38px);background-color: #fff;" v-show="typeTabs == 'text'">
            <div class="margin-b-10" style="flex-shrink: 0; flex-grow: 0" v-if="errList.length > 0">
              <span>错误等级：</span>
              <a-checkbox v-model="allError" @change="onCheckAllChange">全部</a-checkbox>
              <a-checkbox-group @change="onChange" v-model="checkedList" name="errorType" :options="errorList" />
            </div>
            <div style="flex-shrink: 0; flex-grow: 0" v-if="errList.length > 0">
              <div class="margin-b-10">违规类型：</div>
              <div class="labelParent">
                <div class="active labelItem" @click="showLabel(0)">全部问题</div>
                <div
                  class="labelItem"
                  :class="firstLabelClassList[index]"
                  @click="showLabel(index + 1, item, firstLabelClassList[index])"
                  v-for="(item, index) in firstLabelList"
                  :key="item"
                >
                  {{ item }}
                </div>
              </div>
              <div class="labelChildren">
                <div :class="secondClass" v-for="item in secondLabelList" :key="item">{{ item }}</div>
              </div>
            </div>
            <div class="result-card-box">
              <template v-if="showErrList.length > 0">
                <result-list-text-card
                  @correct="correct"
                  @assess="assess"
                  v-for="(item, index) in showErrList"
                  @checkCard="index => (checkCard = index)"
                  :key="item.uuid"
                  :item="item"
                  :index="index + 1"
                  :checkCard="checkCard"
                ></result-list-text-card>
                <!-- <result-list-card
                                  @correct="correct"
                                  v-for="(item, index) in showErrList"
                                  @checkCard="(index) => (checkCard = index)"
                                  :key="index"
                                  :item="item"
                                  :index="index + 1"
                                  :checkCard="checkCard"
                                ></result-list-card> -->
              </template>
              <no-data v-else tip="恭喜您!本次检测没有发现问题!"></no-data>
            </div>
          </div>
          <div class="margin-t-10 flex-1 d-flex" style="position:relative;flex-direction: column;height:calc(100% - 38px);background-color: #fff;" v-show="typeTabs == 'image'">
            <div class="errImg" v-if="obj.imgInfoList.length > 0">
              <a-alert type="info" closable>
                <span slot="message">
                  <img style="width: 16px;margin-right: 6px;margin-bottom: 3px;" src="@/assets/img/ocr.png" />
                  <span>表示该图片字幕存在违规内容</span>
                </span>
              </a-alert>
              <div class="image-box">
                <template v-if="obj.imgInfoList.length > 0 && obj.imgInfoList.length % 4 == 0">
                  <err-image :showSec="false" @play="playError" v-for="(item, index) in obj.imgInfoList" :index="index + 1" :key="index" :item="item"></err-image>
                </template>
                <template v-else-if="obj.imgInfoList.length > 0 && obj.imgInfoList.length % 4 == 1">
                  <err-image :showSec="false" @play="playError" v-for="(item, index) in obj.imgInfoList" :index="index + 1" :key="index" :item="item"></err-image>
                  <div style="width: 23%; height: 77px"></div>
                  <div style="width: 23%; height: 77px"></div>
                  <div style="width: 23%; height: 77px"></div>
                </template>
                <template v-else-if="obj.imgInfoList.length > 0 && obj.imgInfoList.length % 4 == 2">
                  <err-image :showSec="false" @play="playError" v-for="(item, index) in obj.imgInfoList" :index="index + 1" :key="index" :item="item"></err-image>
                  <div style="width: 23%; height: 77px"></div>
                  <div style="width: 23%; height: 77px"></div>
                </template>
                <template v-else-if="obj.imgInfoList.length > 0 && obj.imgInfoList.length % 4 == 3">
                  <err-image :showSec="false" @play="playError" v-for="(item, index) in obj.imgInfoList" :index="index + 1" :key="index" :item="item"></err-image>
                  <div style="width: 23%; height: 77px"></div>
                </template>
                <no-data v-else tip="恭喜您!本次检测没有发现问题!"></no-data>
                <div class="ocr-list" style="width: 100%;" v-if="typeTabs == 'image'">
                  <ocr-card v-for="item in ocrList" @assess="assess" :key="item.pos" :item="item"></ocr-card>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </my-model>
</template>

<script>
import MyModel from '@/components/model/MyModel';
import { detail } from '@/services/verify.js';
import ResultListCard from '../components/ResultListCard.vue';
import ResultListTextCard from '../components/ResultListTextCard.vue';
import NoData from '@/components/NoData';
import ErrImage from '../components/ErrImage.vue';
// eslint-disable-next-line no-unused-vars
import { createHighlight, seekWord, underlineWord, insertStr, labelColorMap, getPlainText } from '@/utils/util.js';
import WaveSurfer from 'wavesurfer.js';
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js';
import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.js';
import { labelMap } from '@/utils/const.js';
import ChartTabs from '@/pages/bigdata/components/ChartTabs.vue';
import OcrCard from './OcrCard.vue';

export default {
  name: 'ResultDetail',
  components: {
    MyModel,
    ResultListCard,
    NoData,
    ErrImage,
    ChartTabs,
    OcrCard,
    ResultListTextCard
  },
  props: {},
  data() {
    return {
      visible: false,
      pageType: '',
      obj: {
        errorTextList: [],
        imgInfoList: []
      },
      tagList: [],
      auditText: '',
      wavesurfer: null,
      audioIsplay: false,
      allError: true,
      errorList: [
        { label: '严重错误', value: '3' },
        { label: '错误', value: '1' },
        { label: '疑错', value: '2' }
      ],
      audioVolume: 50,
      checkedList: ['1', '2', '3'],
      showErrList: [],
      firstLabelList: [],
      imgFirstLabelList: [],
      firstLabelClassList: [],
      imgFirstLabelClassList: [],
      secondClass: '',
      secondLabelList: [],
      errList: [],
      isFullscreen: false,
      labelMap,
      checkCard: -1,
      typeTabs: 'text',
      ocrList: [],
      errorIdList: [],
      errWordList: [],
      sum: 0,
      isShow: false,
      imgArea: [],
      imgProportionh: 0
    };
  },
  created() {},

  methods: {
    init() {
      this.obj = {
        errorTextList: [],
        imgInfoList: []
      };
      this.auditText = '';
      this.firstLabelClassList = [];
      this.secondLabelList = [];
    },
    changeForm(state, data) {
      this.isFullscreen = false;
      this.typeTabs = 'text';
      this.checkCard = -1;
      this.init();
      this.checkedList = ['1', '2', '3'];
      this.allError = true;
      this.visible = state;
      this.pageType = data.taskType;
      this.tagList = [];
      this.errList = [];
      this.showErrList = [];
      this.ocrList = [];
      this.firstLabelList = [];
      this.sum = 0;
      this.getDetial(data.id);
    },
    getDetial(id) {
      detail({ id }).then(res => {
        console.log(res.data);
        if (res.data.code == 0) {
          this.obj = res.data.data;
          //错词数组
          this.errList = res.data.data.errorTextList;
          //错词数组过滤错误等级
          this.showErrList = this.obj.errorTextList.filter(item => this.checkedList.includes(item.level));
          //加上class区分颜色
          this.showErrList.map(item => {
            item.taskId = res.data.data.id;
            item.isAuthAssess = res.data.data.isAuthAssess; //能不能评论
            if (res.data.data?.assessList && res.data.data?.assessList.length) item.result = (res.data.data?.assessList.find(n => n.uuid == item.uuid) || {}).result;
            item.tagClass = this.labelMap[item.firstLabelName];
          });

          //展示违规类型
          this.firstLabelList = this.showErrList.map(item => item.firstLabelName);
          //去重
          this.firstLabelList = [...new Set(this.firstLabelList)];

          //违规类型颜色
          this.firstLabelList.forEach(item => {
            this.firstLabelClassList.push(this.labelMap[item]);
          });
          this.ocrList = [];
          this.imgFirstLabelList = [];
          this.imgFirstLabelClassList = [];
          this.imgArea = [];

          if (this.pageType == 'image') {
            // 图片违规类型
            this.imgFirstLabelList = res.data.data.imgInfoList.map(item => item.tag);
            this.imgFirstLabelList = [...new Set(this.imgFirstLabelList)];
            this.imgFirstLabelList.forEach(item => {
              this.imgFirstLabelClassList.push(this.labelMap[item]);
            });
            console.log(this.imgFirstLabelList);
            res.data.data.imgInfoList.forEach(item => {
              if (item.checkResultList) {
                item.checkResultList = item.checkResultList.map(n => {
                  n.taskId = res.data.data.id;
                  n.isAuthAssess = res.data.data.isAuthAssess;
                  n.result = (res.data.data?.assessList.find(m => m.uuid == n.uuid) || {}).result; //评论结果
                  return n;
                });
                this.ocrList.push(...item.checkResultList);
              }
            });
          }

          if (this.pageType == 'video' || this.pageType == 'image') {
            let imgInfo = [];
            let errorInfo = [];
            if (this.obj.imgInfoList && this.obj.imgInfoList.length > 0) {
              imgInfo = [...new Set(this.obj.imgInfoList.map(item => item.tag))];
            }
            if (this.obj.errorTextList && this.obj.errorTextList.length > 0) {
              errorInfo = [...new Set(this.obj.errorTextList.map(item => item.violateInfo))];
            }
            this.tagList = [...imgInfo, ...errorInfo];
            if (this.pageType == 'image') {
              this.obj.imgInfoList = this.obj.imgInfoList.filter(n => n.checkResultList);
            }
          }

          this.auditText = this.obj.text;
          //文本和大文件用索引标记（有bug）
          // if (this.pageType == 'pdf' || this.pageType == 'ppt' || this.pageType == 'word') {
          //   let errWordList = this.obj.errorTextList.map((item) => item.errWord);
          //   let firstLabelList = this.showErrList.map((item) => item.firstLabelName);
          //   let errIndex = 1;
          //   errWordList.forEach((item, index) => {
          //     let reg = seekWord(item);
          //     this.auditText = this.auditText.replace(reg, createHighlight(item, errIndex, firstLabelList[index]));
          //     errIndex++;
          //   });
          // } else
          //文本、图文用偏移量
          if (this.pageType == 'text' || this.pageType == 'pdf' || this.pageType == 'ppt' || this.pageType == 'word') {
            let textArr = this.obj.text.split('<img') || [];
            let text = '';
            textArr.forEach((n, i) => {
              if (i > 0) {
                text += `<img id='${this.obj?.imgInfoList[i - 1]?.imgPath}' style='width:480px''`;
              }
              text += n;
            });
            this.auditText = text;
            this.sum = getPlainText(this.obj.text).length;
            this.errWordList = []; //错词数组
            this.errorIdList = []; //错词id数组
            for (let i = 0; i < this.errList.length; i++) {
              this.errWordList.push(this.errList[i].errWord);
              //如果keyWordLocationList与错误词一对一则直接返回
              if (this.errList[i].keyWordLocationList) {
                if (this.errList[i].keyWordLocationList.length == 1) {
                  this.errorIdList.push(this.errList[i].keyWordLocationList[0].id);
                } else {
                  //审核返回结果中可能出现keyWordLocationList为多个的bug处理
                  let wordItem = this.errList[i].keyWordLocationList.find(item => item.keyWord == this.errList[i].errWord);
                  if (wordItem) {
                    this.errorIdList.push(wordItem.id);
                  } else {
                    this.errorIdList.push(this.errList[i].keyWordLocationList[0].id);
                  }
                }
              }
            }
            this.errorIdList.forEach((item, index) => {
              let i = this.auditText.indexOf(item);
              // this.auditText = insertStr(this.auditText, i, 'errIndex'+(index+1)+' ')
              this.auditText = insertStr(this.auditText, i - 4, 'class="highlight" style="border-bottom:3px solid ' + labelColorMap[this.errList[index].firstLabelName] + '"');
            });
          } else if (this.pageType == 'video' || this.pageType == 'audio' || this.pageType == 'image') {
            this.sum = this.obj.text.length;
            this.errList.map((item, index) => (item.trueIndex = index));
            //音视频用pos偏移量
            this.obj.errorTextList.forEach((item, index) => {
              let prev = '<span class="highlight" id="errIndex' + (index + 1) + '"' + ' style="border-bottom: 3px solid ' + labelColorMap[item.firstLabelName] + ';">';
              let next = '</span>';
              //id为errIndex长度 + 1
              if (index + 1 < 10) {
                //偏移量位置+之前所有 span 前半标签长度 + 后半标签长度
                this.auditText = insertStr(this.auditText, item.pos * 1 + index * prev.length + index * next.length, prev);
                //偏移量位置+之前所有 span 前半标签长度 + 后半标签长度 + 当前span前半标签长度 + 文字长度
                this.auditText = insertStr(this.auditText, item.pos * 1 + index * prev.length + prev.length + item.errWord.length + index * next.length, next);
              } else if (index + 1 < 100) {
                //id为errIndex长度 + 2，减去0~9 10个id长度少1的
                this.auditText = insertStr(this.auditText, item.pos * 1 + index * prev.length + index * next.length - 10, prev);
                this.auditText = insertStr(this.auditText, item.pos * 1 + index * prev.length + prev.length + item.errWord.length + index * next.length - 10, next);
              } else if (index + 1 < 1000) {
                //id为errIndex长度 + 3，减去0~9 10个id长度少2和10~99 90个id长度少1的
                this.auditText = insertStr(this.auditText, item.pos * 1 + index * prev.length + index * next.length - 110, prev);
                this.auditText = insertStr(this.auditText, item.pos * 1 + index * prev.length + prev.length + item.errWord.length + index * next.length - 110, next);
              }
            });
          }
          if (this.pageType == 'audio') {
            // this.createWaveform(
            //   'https://webfs.tx.kugou.com/202304170935/50115e66814ba7e2f78beb14d5b3eecf/v2/643717a01d1b3f0c589d993e38a98cb7/KGTX/CLTX001/643717a01d1b3f0c589d993e38a98cb7.mp3'
            // );
            this.createWaveform(this.obj.url);
          }
        }
      });
    },
    showLabel(i, name, firstClass) {
      let labelItem = document.getElementsByClassName('labelItem');
      Array.prototype.forEach.call(labelItem, el => {
        el.classList.remove('active');
      });
      labelItem[i].classList.add('active');
      this.errList.map((item, index) => (item.trueIndex = index));
      if (i == 0) {
        this.showErrList = this.errList.filter(item => this.checkedList.includes(item.level));
        this.secondLabelList = [];
        this.secondClass = '';
      } else {
        //设置不加筛选的index，以便音视频筛选后能找到对应的文本位置（通过偏移不好实现）
        let tempErrList = this.errList.filter(item => this.checkedList.includes(item.level));
        this.showErrList = tempErrList.filter(item => item.firstLabelName == name);
        this.secondLabelList = this.showErrList.map(item => item.violateInfo);
        this.secondLabelList = [...new Set(this.secondLabelList)];
        this.secondClass = firstClass;
      }
    },
    correct({ index, word, flag, firstLabelName }) {
      let el = document.getElementsByClassName('highlight')[index];
      if (el) {
        if (flag) {
          el.style.border = 0;
        } else {
          underlineWord(el, firstLabelName);
        }
        el.innerText = word;
      }
    },
    createWaveform(url) {
      this.wavesurfer = WaveSurfer.create({
        container: document.getElementById('waveform'),
        // 光标的填充颜色，指示播放头的位置。
        cursorColor: '#54BE98',
        // 更改波形容器的背景颜色。
        backgroundColor: '#fff',
        // 光标后面的波形颜色。
        waveColor: '#CDC8D5',
        // 光标后面的波形部分的填充色
        progressColor: '#54BE98',
        barGap: 8,
        barWidth: 2,
        backend: 'MediaElement',
        xhr: {
          mode: 'no-cors'
        },
        // 音频播放控件
        mediaControls: false,
        height: 140,
        // 播放速度
        audioRate: '1',
        plugins: [
          // 光标插件
          CursorPlugin.create({
            showTime: true,
            opacity: 1,
            customShowTimeStyle: {
              'background-color': '#000',
              color: '#fff',
              padding: '2px',
              'font-size': '10px'
            }
          }),
          // 时间轴插件
          Timeline.create({
            container: document.getElementById('time-line')
          })
          // Markers.create()
        ]
      });
      this.wavesurfer.load(url);
      // this.wavesurfer.addMarker({
      //   time: 1,
      //   position: 'top',
      //   color: '#DE8080'
      // })
      // this.wavesurfer.play();
      // this.wavesurfer.on('ready', () => {
      //   this.audioIsplay = true;
      //   this.wavesurfer.play();
      // });
      this.wavesurfer.setVolume(0.5);
      this.wavesurfer.on('finish', () => {
        this.audioIsplay = false;
      });
      this.wavesurfer.on('seek', start => {
        this.audioIsplay = true;
        this.wavesurfer.play(start);
      });
    },
    play(type) {
      this.audioIsplay = type;
      this.wavesurfer.playPause();
    },
    addChangeVolume(type) {
      if (type) {
        if (this.audioVolume <= 100) this.audioVolume++;
      } else {
        if (this.audioVolume >= 0) this.audioVolume++;
      }
      this.changeVolume();
    },
    changeVolume() {
      this.wavesurfer.setVolume(this.audioVolume * 0.01);
    },
    onCheckAllChange() {
      if (this.allError) {
        this.checkedList = ['1', '2', '3'];
      } else {
        this.checkedList = [];
      }
      this.showErrList = this.obj.errorTextList.filter(item => this.checkedList.includes(item.level));
      this.showLabel(0);
    },
    onChange() {
      if (this.checkedList.length === this.errorList.length) {
        this.allError = true;
      } else {
        this.allError = false;
      }
      this.showErrList = this.obj.errorTextList.filter(item => this.checkedList.includes(item.level));
      this.showLabel(0);
    },
    playError({ seconds, ocr, item }) {
      if (seconds && document.getElementById('errVideo')) {
        let errVideo = document.getElementById('errVideo');
        // errVideo.play ();
        errVideo.currentTime = seconds;
      }
      this.ocrList = [];
      if (ocr) {
        ocr = ocr.map((n, i) => {
          n.pos = n.pos || i;
          n.taskId = this.obj.id;
          n.isAuthAssess = this.obj.isAuthAssess;
          n.result = (this.obj?.assessList.find(m => m.uuid == n.uuid) || {}).result; //评论结果
          return n;
        });
        this.ocrList = ocr;
      } else {
        item.taskId = this.obj.id;
        item.isAuthAssess = this.obj.isAuthAssess;
        item.result = (this.obj?.assessList.find(m => m.uuid == item.uuid) || {}).result; //评论结果
        this.ocrList = [item];
      }
    },
    showArea(ocr) {
      this.imgArea = [];
      // 图片原始宽度
      if (this.obj.url && this.imgProportionh == 0) {
        // 原图片大小
        let oImg = new Image();
        oImg.src = this.obj.url;
        // 获取图片缩放比例
        this.imgProportionh = document.getElementById('result-detail-image').offsetWidth / oImg.width;
      }
      // 图片被选中的区域
      if (ocr) {
        if (ocr.rect && ocr.rect.length) {
          this.imgArea.push({
            x: ocr.rect[0] * (this.imgProportionh || 1),
            y: ocr.rect[1] * (this.imgProportionh || 1),
            w: ocr.rect[2] * (this.imgProportionh || 1),
            h: ocr.rect[3] * (this.imgProportionh || 1)
          });
        }
      }
    },
    assess(item, type) {
      let list = [];
      if (this.typeTabs == 'text') {
        list = JSON.parse(JSON.stringify(this.showErrList));
        this.showErrList = [];
        this.showErrList = list.map(n => {
          if (n.uuid == item.uuid) n.result = type;
          return n;
        });
      } else {
        list = JSON.parse(JSON.stringify(this.ocrList));
        this.ocrList = [];
        this.ocrList = list.map(n => {
          if (n.uuid == item.uuid) n.result = type;
          return n;
        });
      }
    }
  }
};
</script>

<style scoped lang="less">
.title {
  color: #000;
  font-size: 17px;
  font-weight: bold;
  // border-left: 4px solid #d43a3a;
  padding-left: 6px;
  margin-bottom: 10px;
  // margin-bottom: 10px;
  position: relative;
  left: 6px;
  flex-grow: 0;
  flex-shrink: 0;
  &::before {
    content: '';
    width: 4px;
    height: 13px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #d43a3a;
    left: -4px;
  }
}
/deep/ .ant-checkbox-wrapper {
  &:hover {
    .ant-checkbox-checked::after {
      border: 0;
    }
  }
}

.video-detail,
.file-detail {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    width: 41%;
    height: 621px;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    .content {
      // border: 1px solid #E1E5EB;
      position: relative;
      .area {
        position: absolute;
        border: 2px solid red;
      }
    }

    video {
      object-fit: fill;
      width: 100%;
      height: 333px;
      margin-bottom: 16px;
    }

    img {
      width: 100%;
      margin-bottom: 16px;
    }
    .audit-content {
      // height: 238px;
      height: calc(100% - 412px);
      width: 100%;
      overflow-y: auto;
      padding: 0 12px 0 12px;
      position: relative;
    }
    .count {
      background-color: #f9f9f9;
      color: #b1b1b1;
      width: 100%;
      position: relative;
      border-top: 1px solid #e8e8e8;
      padding-left: 10px;
    }
  }
  .right {
    width: 58%;
    height: 621px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 12px 12px 10px 12px;
    z-index: 99;
    .video-content {
      flex-direction: column;
      height: calc(100% - 35.5px);
    }
    .result {
      height: 78px;
      width: 100%;
      padding: 12px 12px 10px 12px;
      background-color: #fff;
    }
    .result-card-box {
      padding-left: 3px;
      // height: 420px;
      // height: 122px;
      width: 100%;
      overflow-y: auto;
      position: relative;
      flex-grow: 1;
      flex-shrink: 1;
    }
    .errWord {
      width: 100%;
      height: 290px;
      margin-top: 4px;
      padding: 12px 12px 10px 12px;
      margin-bottom: 8px;
      background-color: #fff;
      overflow: auto;
    }
    .errImg {
      width: 100%;
      // height: 241px;
      padding: 14px 12px 10px 10px;
      // height: 70%;
      flex: 1;
      overflow-y: auto;
      background-color: #fff;
      border-radius: 4px;
      // margin-top: 10px;
      border: 1px solid #e1e5eb;
      display: flex;
      flex-direction: column;
      .image-box {
        // height: 236px;
        width: 100%;
        // overflow-y: auto;
        position: relative;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        flex: 1;
        align-content: flex-start;
      }
    }
    .ocr-list {
      max-height: 200px;
      overflow-y: auto;
      margin-top: 16px;
    }
  }
}

.img-detail {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    width: 41%;
    height: 621px;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    .content {
      // border: 1px solid #E1E5EB;
      position: relative;
      .area {
        position: absolute;
        border: 2px solid red;
      }
    }

    video {
      object-fit: fill;
      width: 100%;
      height: 333px;
      margin-bottom: 16px;
    }

    img {
      width: 100%;
      margin-bottom: 16px;
    }
    .audit-content {
      // height: 238px;
      height: calc(100% - 412px);
      width: 100%;
      overflow-y: auto;
      padding: 0 12px 0 12px;
      position: relative;
    }
    .count {
      background-color: #f9f9f9;
      color: #b1b1b1;
      width: 100%;
      position: relative;
      border-top: 1px solid #e8e8e8;
      padding-left: 10px;
    }
  }
  .right {
    width: 58%;
    height: 621px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 12px 12px 10px 12px;
    z-index: 99;
    .video-content {
      flex-direction: column;
      height: calc(100% - 35.5px);
    }

    .labelItem {
      border: 1px solid #2b65f4;
      background-color: #f0f4f9;
      color: #2b65f4;
      &.cbz {
        border: 1px solid #46b1ff;
        background-color: rgba(70, 177, 255, 0.1);
        color: #46b1ff;
      }
      &.ysxt {
        border: 1px solid #e05f5f;
        background-color: rgba(224, 95, 95, 0.1);
        color: #e05f5f;
      }
      &.mgxx {
        border: 1px solid #ebc643;
        background-color: rgba(235, 198, 67, 0.1);
        color: #ebc643;
      }
      &.scsh {
        border: 1px solid #17805a;
        background-color: rgba(23, 128, 90, 0.1);
        color: #17805a;
      }
      &.flfg {
        border: 1px solid #36cdcd;
        background-color: rgba(54, 205, 205, 0.1);
        color: #36cdcd;
      }
      &.grxx {
        border: 1px solid #fa906c;
        background-color: rgba(250, 144, 108, 0.1);
        color: #fa906c;
      }
      &.kjmc {
        border: 1px solid #7a53e5;
        background-color: rgba(122, 83, 229, 0.1);
        color: #7a53e5;
      }
      &.zdyc {
        border: 1px solid #78b45c;
        background-color: rgba(120, 180, 92, 0.1);
        color: #78b45c;
      }
      &.qtmgxx {
        border: 1px solid #fa8701;
        background-color: rgba(250, 135, 1, 0.1);
        color: #fa8701;
      }
    }
    .result {
      height: 78px;
      width: 100%;
      padding: 12px 12px 10px 12px;
      background-color: #fff;
    }
    .result-card-box {
      padding-left: 3px;
      // height: 420px;
      // height: 122px;
      width: 100%;
      overflow-y: auto;
      position: relative;
      flex-grow: 1;
      flex-shrink: 1;
    }
    .errWord {
      width: 100%;
      height: 290px;
      margin-top: 4px;
      padding: 12px 12px 10px 12px;
      margin-bottom: 8px;
      background-color: #fff;
      overflow: auto;
    }
    .errImg {
      width: 100%;
      // height: 241px;
      padding: 14px 12px 10px 10px;
      // height: 70%;
      // flex: 1;
      overflow-y: auto;
      background-color: #fff;
      border-radius: 4px;
      // margin-top: 10px;
      border: 1px solid #e1e5eb;
      display: flex;
      flex-direction: column;
      .image-box {
        // height: 236px;
        width: 100%;
        // overflow-y: auto;
        position: relative;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: flex-start;
      }
    }
    .ocr-list {
      max-height: 200px;
      overflow-y: auto;
      margin-top: 16px;
    }
  }
}
.audio-detail,
.text-detail {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    width: 49%;
    height: 621px;
    // height: 100%;
    background: #fff;
    padding: 12px 0 0 12px;
    .audit-content {
      height: 315px;
      width: 100%;
      overflow-y: auto;
      padding: 0 12px;
      position: relative;
    }
    .count {
      background-color: #f9f9f9;
      color: #b1b1b1;
      width: calc(100% + 12px);
      position: relative;
      left: -12px;
      border-top: 1px solid #e8e8e8;
      padding-left: 10px;
    }
  }
  .right {
    width: 50%;
    height: 621px;
    background: #fff;
    padding: 12px 12px 10px 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    z-index: 99;
    // background-color: #fff;
    .result-card-box {
      padding-left: 3px;
      // height: 281px;
      width: 100%;
      overflow-y: auto;
      position: relative;
    }
  }
  .audit-box {
    width: 100%;
    height: 220px;
    margin-bottom: 16px;
    padding-top: 10px;
    .time-line {
      height: 40px;
    }
    .wave-box {
      height: 140px;
    }
    .btn-handle {
      height: 40px;
      display: flex;
      line-height: 40px;
      .block {
        width: 130px;
        margin-left: 10px;
        .block-input {
          margin: 0 5px;
          width: 45px;
          height: 28px;
          border: 1px solid #e8e8e8;
          outline: none;
        }
      }
      .btn {
        cursor: pointer;
      }
    }
  }
}
.text-detail {
  .left {
    .audit-content {
      height: 552px;
      width: 100%;
      overflow-y: auto;
      padding: 0 12px;
      position: relative;
    }
  }
}
// .img-detail {
//   height: 100%;
//   .left {
//     width: 100%;
//     height: 545px;
//   }
// }
.file-detail {
  .left {
    .content {
      height: calc(100% - 22px);
      overflow-y: auto;
      padding: 6px 10px;
    }
  }
  .right {
    .errImg {
      width: 100%;
      // height: 319px;
      height: 70%;
      padding: 12px 12px 10px 12px;
      // background-color: #fff;
      display: flex;
      flex-direction: column;
      z-index: 99;
      .image-box {
        // height: 260px;
        width: 100%;
        overflow-y: auto;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        align-content: flex-start;
      }
    }
  }
}
.fullscreen {
  &.text-detail {
    .left {
      height: 100%;
      .audit-content {
        height: calc(100% - 44px);
        position: relative;
      }
    }
    .right {
      height: 100%;
      z-index: 99;
      .result-card-box {
        height: auto;
      }
    }
  }
  &.img-detail {
    .left {
      height: calc(100% - 100px);
    }
  }
  &.video-detail {
    .left {
      height: 100%;
      .audit-content {
        height: calc(100% - 412px);
        position: relative;
      }
    }
    .right {
      height: 100%;
      .errWord {
        height: 390px;
        .result-card-box {
          height: 222px;
        }
      }
      .errImg {
        // height: calc(100% - 482px);
        height: 70%;
      }
    }
  }
  &.audio-detail {
    .left {
      height: 100%;
      .audit-content {
        height: calc(100% - 294px);
        position: relative;
      }
    }
    .right {
      height: 100%;
      .result-card-box {
        height: auto;
      }
    }
  }
  &.file-detail {
    .left {
      height: 100%;
      .audit-content {
        height: calc(100% - 382px);
        position: relative;
      }
    }
    .right {
      height: 100%;
      .errWord {
        height: 482px;
        .result-card-box {
          height: 312px;
        }
      }
      .errImg {
        // height: calc(100% - 494px);
        height: 70%;
        // .image-box {
        //   height: calc(100% - 32px);
        // }
      }
    }
  }
}
.labelChildren {
  display: flex;
  flex-wrap: wrap;
  // margin-top: 6px;
  margin-top: 10px;
  margin-bottom: 12px;
  & > div {
    border-radius: 12px;
    padding: 3px 6px;
    font-size: 12px;
    margin-right: 4px;
    margin-bottom: 4px;
    &.cbz {
      border: 1px solid #46b1ff;
      color: #46b1ff;
    }
    &.ysxt {
      border: 1px solid #e05f5f;
      color: #e05f5f;
    }
    &.mgxx {
      border: 1px solid #ebc643;
      color: #ebc643;
    }
    &.scsh {
      border: 1px solid #17805a;
      color: #17805a;
    }
    &.flfg {
      border: 1px solid #36cdcd;
      color: #36cdcd;
    }
    &.grxx {
      border: 1px solid #fa906c;
      color: #fa906c;
    }
    &.kjmc {
      border: 1px solid #7a53e5;
      color: #7a53e5;
    }
    &.zdyc {
      border: 1px solid #78b45c;
      color: #78b45c;
    }
    &.qtmgxx {
      border: 1px solid #fa8701;
      color: #fa8701;
    }
  }
}
/deep/ .ant-alert {
  padding: 6px 10px;
  border: 0;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  span {
    color: #167fff !important;
  }
  .anticon svg {
    margin-bottom: 2px;
  }
}
</style>
